<template>
  <div
    class="event-interceptor"
    @click.capture.prevent.stop
    @mousedown.capture.prevent.stop
    @mouseup.capture.prevent.stop
    @focus.capture.prevent.stop
    @keydown.capture.prevent.stop
    @selectstart.capture.prevent.stop
    tabindex="-1"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'EventInterceptor'
})
</script>

<style scoped>
.event-interceptor {
  pointer-events: none;
  user-select: none; /* 禁用文本选择 */
  -webkit-user-select: none; /* Safari 支持 */
}

.event-interceptor:not(:has(*)) {
  pointer-events: auto;
}
</style>
